<template>
    <div>
        <div class="textDiv">
            <p class="text-primary text-center p-2">随笔写</p>
            <!-- 折叠输入面板 -->
            <div class="w-[50%] mx-auto meta-group relative border-2 border-dashed border-gray-400 rounded-2xl mb-6 transition-all duration-300 flex flex-col items-center
                      hover:border-primary hover:border-solid h-[30px] hover:h-[250px] overflow-hidden group"
                @mouseenter="isHovered = true" @mouseleave="isHovered = false">
                <span class="px-4 leading-[30px] text-gray-400 transition-colors
                            group-hover:text-primary">
                    文章相关
                </span>

                <!-- 标题输入 -->
                <div class="px-6 m-3 opacity-0 group-hover:opacity-100 transition-opacity delay-75">
                    <input type="text" v-model="articleForm.title" class="w-full px-6 py-3 text-primary bg-transparent border-2 border-gray-400 rounded-full
                              focus:outline-none focus:border-primary focus:shadow-primary focus:shadow-sm
                              placeholder:text-gray-600 hover:border-gray-300 mb-4" placeholder="请输入文章标题">

                    <!-- 图片上传 -->
                    <div class="relative mb-4 flex align-center justify-between items-center">
                        <label class="flex items-center gap-4 px-6 py-3 border-2 border-gray-400 rounded-full 
                                    hover:border-primary cursor-pointer transition-colors">
                            <span class="text-primary">📷 封面图</span>
                            <input type="file" @change="handleFileUpload" class="hidden" accept="image/*">
                            <span class="text-gray-400 text-sm truncate">
                                {{ fileName || '点击选择图片(可不上传)' }}
                            </span>
                        </label>
                        <span>取消上传</span>
                        <!-- <transition name="preview-fade">
                            <div v-if="previewImage" class="absolute right-0 top-0 w-16 h-16 rounded-lg overflow-hidden
                                                      border-2 border-primary shadow-lg">
                                <img :src="previewImage" class="w-full h-full object-cover">
                            </div>
                        </transition> -->
                    </div>

                    <!-- 标签输入 -->
                    <input type="text" v-model="articleForm.tags" class="w-full px-6 py-3 text-primary bg-transparent border-2 border-gray-400 rounded-full
                              focus:outline-none focus:border-primary focus:shadow-primary focus:shadow-sm
                              placeholder:text-gray-600 hover:border-gray-300" placeholder="添加标签（用逗号分隔）">
                </div>
            </div>

            <mdv3 v-model="articleForm.content" />

            <!-- 上传按钮 -->
            <div class="push w-full flex">
                <button class="mx-[auto] mt-2 px-8 py-2 text-primary font-bold text-lg rounded-full shadow-lg 
                           transition-transform transform bg-transparent border-2 border-white 
                           hover:scale-105 hover:border-primary hover:shadow-primary hover:shadow-2xl 
                           focus:outline-none" @click="sub">
                    上传
                </button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useAuthStore } from '@/stores/user';
import { requestMethod } from '@/hooks/upLoad';
import { useMessage } from 'naive-ui';
import { pushArticle } from '@/api/article/index';
import { AsyncTaskHandler } from '@/utils/asyncTaskHandler'
const message = useMessage()
const authorStore = useAuthStore();
const isHovered = ref(false);
const fileName = ref('');
// 在原有script基础上添加文件处理
const handleFileUpload = async (event: Event) => {
    const input = event.target as HTMLInputElement;
    // 文件上传
    if (input.files?.[0]) {
        let res = await requestMethod({ file: input.files[0] })
        if (res.status === 'success' && res.data?.url) { // 防止undefined
            fileName.value = res.data.imgFile; // 从data字段获取url
            articleForm.titleImg = res.data.url
            message.success('图片上传成功')
        } else {
            message.error(res.error)
        }
    }

};

// 修改tags为字符串类型（提交时再转换）
const articleForm = reactive({
    title: '随笔写',
    titleImg: null as File | null,
    content: '',
    tags: '', // 修改为字符串类型
    authorNickName: authorStore.displayName
});
const success = () => {
    message.success('上传成功')
    // 重置表单
    articleForm.title = '随笔写'
    articleForm.content = ''
    articleForm.tags = ''
    articleForm.titleImg = null
    fileName.value = ''
}

const sub = async () => {
    // 提交时转换tags为数组
    const formData = {
        ...articleForm,
        tags: articleForm.tags != '' ? articleForm.tags.split(',').map(tag => tag.trim()) : []
    };
    let res = await AsyncTaskHandler.handleSingleTask(pushArticle(formData))
    res.code == 0 ? success() : message.error(res.msg)
};
</script>

<style scoped>
/* 添加输入组动画 */
.input-group,
.upload-group,
.tags-group {
    transition: all 0.3s ease;
}

/* 文件上传标签悬停效果 */
.upload-group:hover label {
    @apply shadow-primary shadow-sm;
}

/* 输入元素聚焦效果 */
input:focus {
    @apply shadow-primary shadow-sm;
}
</style>